<template>
	<view class="container sponsor-detail">
		<view class="detail-top">
			<swiper class="swiper-panel" circular :autoplay="true" :interval="5000" :duration="500"
				v-if="pageTopType==='img'">
				<swiper-item>
					<view class="swiper-item">
						<image class="banner-img" :src="$resFileUrl+detailInfo.image" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="video-panel" v-else>
				<video class="banner-img" :src="$resFileUrl+detailInfo.video" v-if="detailInfo.video"></video>
				<view  class="video-null" v-else>暂无视频</view>
				<!-- <text class="iconfont">&#xe631;</text>
				<image class="banner-img" :src="$fileUrl+'banner.png'" mode="aspectFill"></image> -->
			</view>
			<view class="top-btn-box">
				<view class="yuan-btn " :class="pageTopType==='video'?'btn-success':'btn-default'"
					@click="pageTopType='video'">视频</view>
				<view class="yuan-btn " :class="pageTopType==='img'?'btn-success':'btn-default'"
					@click="pageTopType='img'">图片</view>
			</view>
		</view>
		<view class="detail-main">
			<view class="detail-main-top">
				<text class="goods-title">{{detailInfo.introduce}}</text>
				<text class="goods-unit">￥</text>
				<text class="goods-price">{{detailInfo.price}}</text>
			</view>
			<view class="feature-title">认养信息</view>
			<view class="feature-box">
				<view class="feature-list">
					<image class="feature-img" :src="$fileUrl+'feature-1.png'" mode="widthFix"></image>
					<view class="feature-name">{{detailInfo.variety}}</view>
					<view class="feature-tips">认养品种</view>
				</view>
				<view class="feature-list">
					<image class="feature-img" :src="$fileUrl+'feature-2.png'" mode="widthFix"></image>
					<view class="feature-name">{{detailInfo.remain}}{{detailInfo.unit}}</view>
					<view class="feature-tips">剩余数量</view>
				</view>
				<view class="feature-list">
					<image class="feature-img" :src="$fileUrl+'feature-3.png'" mode="widthFix"></image>
					<view class="feature-name">{{detailInfo.cycle}}天</view>
					<view class="feature-tips">认领周期</view>
				</view>
				<view class="feature-list">
					<image class="feature-img" :src="$fileUrl+'feature-4.png'" mode="widthFix"></image>
					<view class="feature-name">{{$getGlobleTypeName('sys_deliver_type',detailInfo.deliverType)}}</view>
					<view class="feature-tips">认养收获</view>
				</view>
			</view>
			<view class="page-panel">
				<view class="panel-title line-title">认养流程</view>
				<view>
					<view class="pro-list">
						<view class="pro-left">1</view>
						<view class="pro-right">
							<view class="pro-name">认养下单</view>
							<view class="pro-tips">认养下单并成功支付</view>
						</view>
					</view>
					<view class="pro-list">
						<view class="pro-left">2</view>
						<view class="pro-right">
							<view class="pro-name">认养过程</view>
							<view class="pro-tips">认养过程中，可实时观看基地视频监控以及物联网环境实时数据</view>
						</view>
					</view>
					<view class="pro-list">
						<view class="pro-left">3</view>
						<view class="pro-right">
							<view class="pro-name">认养收获</view>
							<view class="pro-tips">认养成熟后，根据农场配送策略，可自提或通过快递配送到家</view>
						</view>
					</view>
				</view>
			</view>
			<view class="page-panel">
				<view class="sponsor-info-list">
					<view class="s-i-l-title">认养类型：</view>
					<view class="s-i-l-info">{{$getGlobleTypeName('sys_adopt_type',detailInfo.adoptType)}}</view>
				</view>
				<view class="sponsor-info-list">
					<view class="s-i-l-title">截止时间：</view>
					<view class="s-i-l-info">{{$format(detailInfo.date,'yyyy-MM-dd')}}</view>
				</view>
				<view class="sponsor-info-list">
					<view class="s-i-l-title">购买数量：</view>
					<view class="s-i-l-info num-box">
						<text class="iconfont" @click="minusNum">&#xe711;</text>
						<input class="num-input" type="number" v-model="formData.num">
						<text class="iconfont" @click="addNum">&#xe607;</text>
					</view>
				</view>
				<view class="sponsor-info-list sponsor-agreement">
					<text class="iconfont" :class="agreeType&&'c-success'" @click="agreeType=!agreeType">&#xe63c;</text>
					<text @click="agreeType=!agreeType">阅读并同意</text>
					<text class="c-primary" @click="showDetailType=true">《认养协议》</text>
				</view>
			</view>
			<view class="page-detailimg-panel">
				<view class="panel-title">认养详情</view>
				<rich-text class="rich-box" :nodes="detailInfo.detail"></rich-text>
			</view>
		</view>

		<view class="activity-action">
			<view class="left-action" @click="jumpIndex">
				<text class="iconfont">&#xe601;</text>
				<view>首页</view>
			</view>
			<view class="left-action">
				<button class="share-btn" open-type="share">
					<text class="iconfont">&#xebab;</text>
					<view>分享</view>
				</button>

			</view>
			<view class="left-action" @click="collectChange">
				<template v-if="!detailInfo.collect">
					<text class="iconfont">&#xe600;</text>
					<view>收藏</view>
				</template>
				<template v-else>
					<text class="iconfont c-success">&#xe86d;</text>
					<view class="c-success">已收藏</view>
				</template>
			</view>
			<view class="flex-grow"></view>
			<view class="yuan-btn btn-success" @click="clickSure" v-if="onlyShow!=='true'">立即认养</view>
		</view>
		<view class="detail-panel" :class="showDetailType&&'detail-panel-show'" @click="showDetailType=false"
			@touchmove.stop.prevent="moveHandle">
			<scroll-view class="detail-box" :scroll-y="true">
				<view class="rich-parent">
					<rich-text class="rich-box" :nodes="detailInfo.protocol"></rich-text>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import api from '@/common/api';
	import { getStorage, hideLoading, showLoading, showToast, utilLogin } from '@/common/util';
	import { onLoad } from "@dcloudio/uni-app"
	import commonStore from '../../store/commonStore';
	const pageTopType = ref('img')
	const agreeType = ref(false)
	const detailInfo = ref<any>({})
	const formData = reactive({ num: 1 })
	const showDetailType = ref(false)
	
	const pageId = ref('')
	const onlyShow = ref('')
	onLoad((options) => {
		pageId.value = options.id;
		onlyShow.value=options.onlyShow||''
	})
	onMounted(async () => {
		const promise = new Promise(resolve => {
			setTimeout(() => {
				resolve({
					title: detailInfo.value.introduce,
					path: '/pages/index/index?shareType=sponsor&shareId=' + detailInfo.value.id
				})
			}, 2500)
		})
		//朋友
		onShareAppMessage(() => {
			return {
				title: '果园认养',
				path: '/pages/index/index?shareType=sponsor&shareId=' + detailInfo.value.id,
				promise
			}
		})
		//朋友圈
		onShareTimeline(() => {
			return {
				promise,
				title: '果园认养',
				path: '/pages/index/index?shareType=sponsor&shareId=' + detailInfo.value.id
			}
		});
		await commonStore.dispatch('getDefType', 'sys_adopt_type')
		await commonStore.dispatch('getDefType', 'sys_deliver_type')
		await getDetail()
		
	})
	const getDetail = async () => {
		showLoading()
		try {
			const res = await api.getAdoptById(pageId.value)
			detailInfo.value = res.data || []
		} finally {
			hideLoading()
		}

	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const jumpIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const minusNum = () => {
		--formData.num
	}
	const addNum = () => {
		++formData.num
	}
	const moveHandle = () => {
		//
	}
	// 收藏
	const collectChange = async () => {
		// 没有登录 提示登录
		let userAuth = getStorage('userAuth') || {}
		if (!userAuth.userToken) {
			utilLogin((loginType : boolean) => {
				//登录成功
				if (loginType) { }
			})
			return
		}

		showLoading()
		try {
			if (detailInfo.value.collect) {
				
				await api.adoptCollect(detailInfo.value.id, false)
			} else {
				await api.adoptCollect(detailInfo.value.id, true)
			}
			getDetail()
		} finally {
			hideLoading()
		}
		showToast('操作成功')
	}
	const clickSure = () => {
		if(!agreeType.value){
			showToast('请查看并同意认养协议')
			return
		}
		// 没有登录 提示登录
		let userAuth = getStorage('userAuth') || {}
		if (userAuth.userToken) {
			jump('/pages/sponsor/sureOrder?id=' + pageId.value + '&num=' + formData.num)
		} else {
			utilLogin((loginType : boolean) => {
				if (loginType) {
					//登录成功
					jump('/pages/sponsor/sureOrder?id=' + pageId.value + '&num=' + formData.num)
				}
			})
		}

	}
</script>

<style lang="scss">
	.sponsor-detail {
		padding-bottom: 120rpx;

		.detail-top {
			position: relative;
		}

		.swiper-panel {
			height: 440rpx;
		}

		.video-panel {
			height: 440rpx;
			position: relative;

			.iconfont {
				font-size: 88rpx;
				color: #fff;
				position: absolute;
				z-index: 10;
				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
			}
		}

		.banner-img {
			width: 100%;
			height: 440rpx;
		}

		.top-btn-box {
			position: absolute;
			left: 0;
			bottom: 15rpx;
			width: 100%;
			padding: 20rpx;
			z-index: 11;

			.yuan-btn {
				display: inline-flex;
				width: 130rpx;
				height: 62rpx;
				border-radius: 62rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
			}
		}

		.detail-main {
			background-color: #F9F9F9;
			transform: translateY(-20rpx);
			border-radius: 14px;
			padding: 20rpx;
		}

		.detail-main-top {
			display: flex;
			align-items: center;
			border-bottom: solid 1px #eee;
			padding-bottom: 20rpx;
		}

		.goods-title {
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
			flex-grow: 1;
		}

		.goods-unit {
			font-size: 26rpx;
			color: #FF5F56;
		}

		.goods-price {
			font-size: 34rpx;
			font-weight: bold;
			color: #FF5F56;
		}

		.feature-title {
			font-weight: bold;
			font-size: 34rpx;
			color: #232323;
			margin-top: 20rpx;
		}

		.feature-box {
			padding: 30rpx 20rpx;
		}

		.feature-list {
			text-align: center;
			width: 25%;
			display: inline-block;
		}

		.feature-img {
			width: 120rpx;
			height: 120rpx;
		}

		.feature-name {
			font-size: 26rpx;
			color: #232323;
		}

		.feature-tips {
			font-size: 26rpx;
			color: #8F8F8F;
			margin-top: 20rpx;
		}

		.page-panel {
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

		.page-detailimg-panel {
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			padding: 20rpx;
			margin-bottom: 20rpx;

			.panel-title {}
		}

		.panel-title {
			font-weight: bold;
			font-size: 34rpx;
			color: #232323;
			padding-bottom: 20rpx;
		}

		.line-title {
			border-bottom: solid 1px #eee;
		}

		.pro-list {
			display: flex;

		}

		.pro-left {
			display: inline-block;
			font-size: 50rpx;
			flex-shrink: 0;
			width: 80rpx;
			text-align: center;
			color: #17CC77;
			padding: 8rpx;
		}

		.pro-right {
			border-bottom: 1px solid #ECECEC;
			padding: 20rpx;
			flex-grow: 1;
		}

		.pro-name {
			font-weight: bold;
			font-size: 26rpx;
			color: #232323;
		}

		.pro-tips {
			font-size: 28rpx;
			color: #5B5B5B;
			margin-top: 6rpx;
		}

		.sponsor-info-list {
			display: flex;
			border-bottom: solid 1px #E3E3E3;
			height: 110rpx;
			align-items: center;
		}

		.s-i-l-title {
			font-size: 32rpx;
			color: #5B5B5B;
		}

		.s-i-l-info {
			font-weight: bold;
			font-size: 32rpx;
			color: #232323;
		}

		.num-input {
			border: solid 1px #8F8F8F;
			width: 60rpx;
			padding: 4rpx 0;
			font-size: 28rpx;
			margin: 0 20rpx;
			text-align: center;
			border-radius: 4rpx;
			color: #232323;
			font-weight: bold;
		}

		.num-box {
			display: flex;
			align-items: center;
			font-weight: lighter;

			.iconfont {
				font-size: 30rpx;
				color: #D8D8D8;
				padding: 10rpx 0;
			}
		}

		.sponsor-agreement {
			font-size: 26rpx;
			color: #8F8F8F;
			display: flex;
			align-items: center;
			margin-top: 8rpx;

			.iconfont {
				color: #eee;
				transform: translateY(4rpx);
				margin-right: 8rpx;
			}
		}

		.activity-action {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
			padding: 0 30rpx;

			.yuan-btn {
				width: 170rpx;
				height: 66rpx;
				border-radius: 66rpx;
			}
		}

		.flex-grow {
			flex-grow: 1;
		}

		.left-action {
			font-size: 24rpx;
			color: #C4C7D0;
			text-align: center;
			margin-right: 30rpx;

			.iconfont {
				font-size: 40rpx;
			}
		}

		.detail-panel {
			width: 100%;
			height: 100%;
			position: fixed;
			left: -9999px;
			top: 0;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.detail-panel-show {
			left: 0;

			.detail-box {
				bottom: 0;

			}
		}

		.detail-box {
			background-color: #F9F9F9;
			border-radius: 14rpx 14rpx 0 0;
			position: absolute;
			left: 0;
			bottom: -100%;
			width: 100%;
			transition: all 0.3s;
			max-height: 80vh;
			overflow: auto;

			box-sizing: border-box;
		}

		.rich-parent {
			padding: 30rpx;
		}

		.rich-box {
			line-height: 60rpx;
		}

		.share-btn {
			font-size: 24rpx;
			background-color: transparent;
			color: #C4C7D0;
			line-height: unset;
			padding-left: 0;
			padding-right: 0;
		}

		.share-btn::after {
			border: none
		}
		.video-null{
			padding: 50rpx 0;
			text-align: center;
			color: #999;
		}
	}
</style>